<script setup>
import icon1 from '../assets/icon1.png';
import icon2 from '../assets/icon2.png';
import icon3 from '../assets/icon3.png';
import icon4 from '../assets/icon4.png';
import icon5 from '../assets/01.png';
import icon6 from '../assets/02.png';
import icon7 from '../assets/03.png';
import { useRouter } from 'vue-router';
import { ref } from 'vue'
const items = ref([
    { img: icon1, title: '学校简介' },
    { img: icon2, title: '专业介绍' },
    { img: icon3, title: '预约进校' },
    { img: icon4, title: '图书馆预约' },
])
const router = useRouter()
console.log(router);

console.log(items.value);
const tus = ref([
    { img: icon5, title: '学校简介' },
    { img: icon6, title: '专业介绍' },
    { img: icon7, title: '预约进校' },
])

console.log(tus.value);
const btnClick=() =>{
    console.log('btnClick');
    router.push({path:'/whxdList'})
}
</script>
<template>
    <!--  我的大学图片-->
    <div class="box"><img src="../assets/image.png.png" alt="">
        <!-- 我的大学模块 -->
        <div class="content">
            <div class="bg">
                <!-- 我的大学 -->
                <div class="title"><img src="../assets/image.png" alt=""><span>我的大学</span></div>
                <div class="nav">
                    <div class="item" v-for="item in items">
                        <img :src="item.img" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <div class="xyfc">
                    <div>校园风采</div>
                    <div>查看更多<img src="../assets/you.png" alt=""></div>
                </div>
                <div class="xyfc-img">
                    <div><img src="../assets/xiaoyuan.png" alt=""></div>
                    <div><img src="../assets/xiaoyuan1.png" alt="">
                        <img src="../assets/xiaoyuan2.png" alt="">
                    </div>
                </div>
                <div class="zyfw">
                    <div>专业服务</div>
                </div>
                <div class="zyfw-tu">
                    <div class="tu" v-for="tu in tus">
                        <img :src="tu.img" alt="">
                        <span>{{ tu.title }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="content2">
            <div class="wdc">
                <div class="title1"><img src="../assets/wdc.png" alt=""><span>我的城</span></div>
                <div class="xyytf">
                    <div>相约游团风</div>
                    <div>查看更多<img src="../assets/you.png" alt=""></div>
                </div>
                <div class="xyytf-tu">
                    <div class="xyytf-zuo"> <img src="../assets/ls.png" alt="">
                    </div>
                    <div class="xyytf-you">
                        <div>龙山源果木专业合作社</div>

                        <div class="tag">
                            <span>绿色天然</span>
                            <span>水果采摘</span>
                            <span>有机</span>
                            <span>生态</span>
                        </div>
                        <div class="time">
                            <img src="../assets/time.png" alt="">
                            <span>08：00-17：00</span>
                        </div>
                        <div class="dizhi">
                            <img src="../assets/dizhi.png" alt="">
                            <span>团风县回龙山镇沙畈村、罗家咀村</span>
                        </div>
                        <div class="btn">
                            <button>了解详情</button>
                        </div>
                    </div>
                </div>
                <div class="xyytf-tu1">
                    <div class="xyytf-zuo1"> <img src="../assets/tbao.png" alt="">
                    </div>
                    <div class="xyytf-you1">
                        <div>童宝草莓采摘园</div>

                        <div class="tag1">
                            <span>红颜奶油</span>
                            <span>亲子采摘</span>
                            <span>有机</span>
                            <span>生态</span>
                        </div>
                        <div class="time1">
                            <img src="../assets/time.png" alt="">
                            <span>09：00-17：30</span>
                        </div>
                        <div class="dizhi1">
                            <img src="../assets/dizhi.png" alt="">
                            <span>黄州区堵城镇</span>
                        </div>
                        <div class="btn1">
                            <button>了解详情</button>
                        </div>
                    </div>
                </div>
                <div class="xyytf">
                    <div>探店食宿</div>
                    <div>查看更多<img src="../assets/you.png" alt=""></div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/jiudian1.png" alt="">
                        <div class="tdss-item-con">
                            <div class="title">团风觅怡酒店</div>
                            <div class="star"><img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>￥129-169</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/jiudian2.png" alt="">
                        <div class="tdss-item-con">
                            <div class="title">茉莉花开酒店</div>
                            <div class="star"><img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                                <img src="../assets/xingxing.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>￥129-169</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="xyytf">
                    <div>摄影定制</div>
                    <div>查看更多<img src="../assets/you.png" alt=""></div>
                </div>
                <div class="xyfc-img">
                    <div><img src="../assets/diyi.png" alt=""><span>产品拍摄</span></div>
                    <div><img src="../assets/dier.png" alt=""><span>节日写真</span>
                        <img src="../assets/disan.png" alt="">
                    </div>
                </div>
                <div class="xyytf" >
                    <div>网红小店</div>
                    <div @click="btnClick">查看更多<img src="../assets/you.png" alt=""></div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/huang.png" alt="">
                        <div class="tdss-item-con">
                            <div class="tit">黄鼠狼黄焖鸡</div>
                            <span class="zi"> 四川火锅汤底和秘制的营养酱料，口感嫩滑爽口</span>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/peng.png" alt="">
                        <div class="tdss-item-con">
                            <div class="tit">鹏记热干面</div>
                            <span class="zi">用料讲究，手法精湛，口味正宗</span>
                        </div>
                    </div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/jin.png" alt="">
                        <div class="tdss-item-con">
                            <div class="tit">金汤麻辣烫</div>
                            <span class="zi"> 一人一锅一煮的模式，既健康卫生又风味纯正</span>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/chun.png" alt="">
                        <div class="tdss-item-con">
                            <div class="tit">春至春归</div>
                            <span class="zi">浓郁的茶香，丝滑的口感，回味无穷</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.box {
    background-color: rgba(241, 244, 249, 1);
}

.content {
    padding: 5px 16px;

}

.content>.bg {
    background-color: #fff;
    height: 500px;
    border-radius: 16px;
}

.box>img {
    width: 100%;
    display: block;
}

.content>.bg>.title {
    padding: 0px 5px;
    display: flex;
    align-items: center;
}

.content>.bg>.title>span {
    margin-right: 18px;
    font-weight: bold;
    color: #784e23;
}

.content>.bg>.title>img {
    margin-right: 4px;
    width: 18.5px;
    height: 14.5px;
}

.content>.bg>.nav {
    margin-top: 14px;
    display: flex;
    justify-content: space-evenly;
}

.content>.bg>.nav>.item {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.content>.bg>.nav>.item img {
    width: 56px;
}

.content>.bg>.nav>.item span {
    margin-top: 12px;

}

.content .bg .xyfc {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 20px;
}

.content .bg .xyfc>div:first-child {
    font-size: 14px;
    color: #784E23;
}

.content .bg .xyfc>div:last-child {
    font-size: 12px;
    color: #555555;
}

.content .bg .xyfc-img {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
}

.content .bg .xyfc-img>div {
    width: 48.1%;
    height: 128px;
}

.content .bg .xyfc-img>div:last-child>img {
    height: 62px;
}

.content .bg .xyfc-img>div>img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.content .bg .zyfw {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 20px;
}

.content .bg .zyfw>div:first-child {
    font-size: 14px;
    color: #784E23;
}

.content>.bg>.zyfw-tu {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
}

.content>.bg>.zyfw-tu {
    margin-top: 14px;
    display: flex;
    justify-content: space-evenly;
}

.content>.bg>.zyfw-tu>.tu {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.content>.bg>.zyfw-tu>.tu img {
    width: 80%;
}

.content>.bg>.zyfw-tu>.tu span {
    margin-top: 8px;

}

.content2 {
    padding: 8px 16px;
}

.content2>.wdc {
    background-color: #fff;
    height: 1370px;
    border-radius: 16px;
    padding: 5px 16px;
}

.content2>.wdc>.title1 {
    padding: 5px 5px;
    display: flex;
    align-items: center;

}

.content2>.wdc>.title1>span {
    margin-right: 18px;
    font-weight: bold;
    color: #784e23;
}

.content2>.wdc>.title1>img {
    margin-right: 4px;
    width: 18.5px;
    height: 14.5px;
}

.content2>.wdc .xyytf {
    display: flex;
    justify-content: space-between;
    margin: 0px -16px;
    margin-top: 10px;
    height: 30px;
    background: linear-gradient(90deg, rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);
    align-items: center;
    padding: 0px 16px;

}

.content2>.wdc .xyytf>div:first-child {
    font-size: 14px;
    color: #784E23;
}

.content2>.wdc .xyytf>div:last-child {
    font-size: 12px;
    color: #555555;
}

.content2>.wdc .xyytf>div:last-child>img {
    margin-left: 10px;
}

.content2>.wdc .xyytf-tu {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}

.content2>.wdc .xyytf-tu>.xyytf-zuo {
    width: 40%;
    display: flex;
    align-items: center;
}

.content2>.wdc .xyytf-tu>.xyytf-zuo img {
    width: 100%;
}

.content2>.wdc .xyytf-tu>.xyytf-you {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}

.content2>.wdc .xyytf-tu>.xyytf-you .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.content2>.wdc .xyytf-tu>.xyytf-you>.tag {
    margin: 8px 0;
}

.content2>.wdc .xyytf-tu>.xyytf-you>.tag span {
    background-color: #f0f0f0;
    margin-left: 4px;
    padding: 2px;
}

.content2>.wdc .xyytf-tu>.xyytf-you>.tag span:first-child {
    margin-left: 0;
}

.content2>.wdc .xyytf-tu>.xyytf-you .time .dizhi {
    display: flex;
    align-items: center;
}

.content2>.wdc .xyytf-tu>.xyytf-you .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.content2>.wdc .xyytf-tu>.xyytf-you .btn button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
}

.content2>.wdc .xyytf-tu1 {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}

.content2>.wdc .xyytf-tu1>.xyytf-zuo1 {
    width: 40%;
    display: flex;
    align-items: center;
}

.content2>.wdc .xyytf-tu1>.xyytf-zuo1 img {
    width: 100%;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1 {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1 .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 {
    margin: 8px 0;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 span {
    background-color: #f0f0f0;
    margin-left: 4px;
    padding: 2px;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1>.tag1 span:first-child {
    margin-left: 0;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1 .time1 .dizhi1 {
    display: flex;
    align-items: center;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1 .btn1 {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.content2>.wdc .xyytf-tu1>.xyytf-you1 .btn1 button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
}

.content2>.wdc>.tdss-box {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
}

.content2>.wdc>.tdss-box>.tdss-item {
    width: 48%;
    background-color: rgb(255, 255, 255,1);
    border-radius: 10px;
    border: 0.5px solid rgba(120, 78, 35, 1);
}

.content2>.wdc>.tdss-box>.tdss-item>img {
    width: 100%;
    height: 120px;
}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con {
    padding: 0px 12px 0px 7px;
}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con .title {
    font-size: 12px;
}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con .star>img {
    margin-right: 3px;
    width: 12px;
    height: 12px;

}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con .price {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con .price button {
    border-radius: 20px;
    background: rgba(120, 78, 35, 1);
    color: #fff;
    padding: 0px 8px;
}

.content2 .wdc .xyfc-img {
    display: flex;
    justify-content: space-between;
    padding: 10px 6px;
}

.content2 .wdc .xyfc-img>div {
    width: 48.1%;
    height: 220px;
    position: relative;
}

.content2 .wdc .xyfc-img>div>span {
    position: absolute;
    left: 2%;
    bottom: 5%;
    color: #fff;
}

.content2 .wdc .xyfc-img>div:last-child>img {
    height: 107px;
}

.content2 .wdc .xyfc-img>div>img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.content2>.wdc>.tdss-box>.tdss-item .tdss-item-con .zi {
    font-size: 11px;
}
</style>